<template>
  <div id="app">
     <transition :name="viewTransition" :css="!!direction">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
      </transition>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "app",
  computed: {
    ...mapState({
      direction: state => state.vux.direction
    }),
    viewTransition() {
      if (!this.direction) return "";
      return "vux-pop-" + (this.direction === "forward" ? "in" : "out");
    }
  },
  created: function() {
  }
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}
.title{
  color: #303133;
}
html,body {
  background-color: #f1f1f1;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
img{
  display: block;
}
.weui-search-bar__label {
  top: 5px!important;
}
a{
    color: rgb(51, 153, 255);
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
  color:rgb(51, 153, 255)!important;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 350ms;
  height: 100%;
  top: 0;
  right: 0;
  left:0;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.weui-cells{
  margin-top: 0.77em!important;
}
</style>
